<template>
	<view class="">
		<view class="hei20"></view>
		<view class="mar-top15 wid90 mar borRad20" style="background: #3978F9;padding: 30rpx 0;">
			<view class="wid90 mar ">
				<view class="hei20"></view>
				<view class="dis disAl coFFF" style="line-height: 60rpx;">
					<image src="../../static/imgs/icon/jifen1.png" style="height: 50rpx;width: 50rpx;"></image>
					<view class="mar-left20 foSi58">￥</view>
					<input class="wid70" v-model="money" type="text" placeholder="输入金额"
						placeholder-style="color: #FFF;line-height: 60rpx;font-size: 48rpx;"
						style="min-height: 60rpx;height: 60rpx;line-height: 60rpx;font-size: 48rpx;" />
				</view>
				<view class="hei20"></view>
				<view class="mar-top30 dis disAl" style="justify-content: space-around;">
					<view class="hei60 borRad40 dis disAl disJuC foSi25 batt" @tap="toMymoneyrecord">余额明细</view>
					<view class="hei60 borRad40 dis disAl disJuC foSi25 batt" @tap="toWithdraw">充值记录</view>
				</view>
			</view>
		</view>
		<view class="wid90 mar mar-top30 bacFFF borRad20" style="padding: 20rpx 0;">
			<view class="dis disAl disJuB hei80" @click.stop="paymentWay = 1" style="padding: 20px;">
				<view class="dis disAl">
					<image src="../../static/imgs/icon/weixin.png" style="width: 38rpx;height: 31rpx;"></image>
					<view class="fowe600 mar-left20">微信支付</view>
				</view>
				<image v-if="paymentWay !== 1" src="../../static/imgs/icon/xuan.png"
					style="width: 30rpx;height: 30rpx;"></image>
				<image v-if="paymentWay === 1" src="../../static/imgs/icon/xuan1.png"
					style="width: 30rpx;height: 30rpx;"></image>
			</view>
		</view>
		<view style="height: 120rpx;" :style="'padding-bottom: '+(bottomHight - 20)+'px;'"></view>
		<view class="wid100 bacFFF poFix" style="bottom: 0;">
			<view class="wid90 mar dis disAl disJuB" style="height: 120rpx;">
				<view class="foSi35 fowe800 dis disAl">
					<view>支付金额：</view>
					<view v-if="paymentWay === 1" class="overflowHidden" style="color: #3978F9;width: 220rpx;">￥{{money || 0.00}}</view>
				</view>
				<view class="hei80 borRad40 dis disAl disJuC foSi30 coFFF"
					style="background-color: #035DFF;width: 232rpx;" @click="zhifu()">充值</view>
			</view>
			<view v-if="bottomHight != 0" :style="'height: '+(bottomHight - 20)+'px;'"></view>
		</view>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module');
	import { Goods } from '../../model/integralgoods-model';
	import { Config } from '../../utils/config.js';
	var Goods2 = new Goods()
	export default {
		data() {
			return {
				url: Config.restUrl,
				money: null,
				paymentWay: 1,
				bottomHight: 0,
			}
		},
		onLoad(option) {
			let app = uni.getSystemInfoSync();
			this.bottomHight = app.safeAreaInsets.bottom //屏幕底部安全距离
		},
		methods: {
			zhifu() {
				// return uni.showToast({
				// 	title: '请填写充值金额',
				// 	icon: 'none',
				// 	duration: 2000
				// })
				var that = this
				if (!that.money || that.money <= 0) {
					return uni.showToast({
						title: '请填写充值金额',
						icon: 'none',
						duration: 2000
					})
				}
				let params = {
					money: that.money
				}
				Goods2.get_cz((data) => {
					console.log(data)
					if (data.code === 1) {
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: data.data.pay_info.appId, // 必填，公众号的唯一标识
							timestamp: data.data.pay_info.timeStamp, // 必填，生成签名的时间戳
							nonceStr: data.data.pay_info.nonceStr, // 必填，生成签名的随机串
							signature: data.data.pay_info.paySign, // 必填，签名
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
						})
						jweixin.ready(function() {
							jweixin.chooseWXPay({
								appId: data.data.pay_info.appId,
								package: data.data.pay_info.package, //
								timestamp: data.data.pay_info.timeStamp, // 时间戳
								nonceStr: data.data.pay_info.nonceStr, // 随机数
								signType: data.data.pay_info.signType,
								paySign: data.data.pay_info.paySign, // 签名
								success: function() {
									// 支付成功
									// 支付成功(查询支付状态)
									var params = {
										id:data.data.id
									}
									
									Goods2.getmoneys((data)=>{
										console.log(data)
										if(data.code == 1){
											uni.showModal({
												title: '提示',
												content: '支付成功',
												showCancel: false,
												success: function(res) {
													if (res.confirm) {
														uni.navigateBack()
													}
												}
											})
										}else{
											uni.showToast({
												title: '支付失败',
												icon: 'none',
												duration: 2000
											})
										}
									},params)
								},
								cancel: function() {
									// 支付失败
									console.log(res)
									uni.showToast({
										title: '取消支付',
										icon: 'none',
										duration: 2000
									})
								},
								fail: function() {
									// 支付失败
									console.log(res)
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										duration: 2000
									})
								}
							})
						})
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}, params)
			},
			toMymoneyrecord: function() {
				var that = this;
				uni.navigateTo({
					url: '/pages/mymoneyrecord/index'
				});
			},
			toWithdraw() {
				uni.navigateTo({
					url: '/pages/mymoney/topUp'
				});
			},
		}
	}
</script>

<style>
	page {
		height: 100vh;
		background: #EEEEEE;
	}

	.foSi58 {
		font-size: 58rpx;
	}

	.batt {
		width: 172rpx;
		background: #9CBCFC;
		color: #3978F9;
	}
</style>